<!DOCTYPE html>
<!-- Created By CodingNepal -->

  <head>
    <meta charset="utf-8">
    <title>郭一博个人界面</title>
    <link rel="stylesheet" type="text/css"href="style.css">
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
	    <!-- <script src="https://code.jquery.com/jquery-3.4.1.js"></script> -->
		<style>
			a, p {
			  font-family: 'Roboto Condensed', sans-serif;
			}
			.cont-contactInfo {
			  float: left;
			  padding-right: 5%;
			  width: 45%;
			}
			 
			 
			.cont-contactBtn {
			  height: 359px;
			  margin: 0 auto;
			  width: 574px;
			  position: relative; 
			  perspective: 800px;
			      border-radius: 50px;
			    
			}
			.cont-contactBtn .cont-flip {
			  position: absolute;
			   transition: transform 0.5s;
			   transform-style: preserve-3d;
			  height: 100%;
			  width: 100%;
			}
			.cont-contactBtn .cont-flip .front, .cont-contactBtn .cont-flip .back {
			  display: block;
			  margin: 0;
			  height: 100%;
			  width: 100%;
			  position: absolute;
			   backface-visibility: hidden;
			}
			 
			.cont-contactBtn .cont-flip .back {
			  background-color: #fff;   
			  transform: rotateX(180deg);
			}
			.cont-contactBtn .btn {
			  margin-top: 155px;
			}
			.cont-contactBtn .cont-flip.flipped { 
			  transform: rotateX(180deg);
			}
			.cont-contactBtn .contact-form {
			  padding: 0 10%;
			  margin-top: 50px;
			  width: 80%;
			}
			.cont-contactBtn .contact-form input, .cont-contactBtn .contact-form textarea {
			  border: 1px solid #808080;
			  font-size: 12px;
			  padding: 10px 0;
			  text-transform: uppercase;
			}
			.cont-contactBtn .contact-form input[type="text"] {
			  float: left;
			  margin-bottom: 8px;
			  padding-left: 3%;
			  width: 44.9%;
			      border-radius: 20px;
			}
			.cont-contactBtn .contact-form .gutter {
			  margin-right: 2.8%;
			}
			.cont-contactBtn .contact-form textarea {
			  height: 106px;
			  padding-left: 3%;
			  margin-bottom: 22px;
			  width: 96.2%;
			      border-radius: 50px;
			}
			.cont-contactBtn .contact-form input[type="submit"] {
			  background-color: #ff4d54;
			  border: none;
			  color: #fff;
			  height: 45px;
			  width: 100%;
			  max-width: 93px;
			  text-align: center;
			    border-radius: 50px;
			}
			.cont-contactBtn .close {
			  display: block;
			  height: 19px;
			  width: 19px;
			  background-image: url('c.png');
			  background-repeat: no-repeat;
			  background-position: center;
			  position: absolute;
			  top: 15px;
			  right: 3%;
			}
			.btn {
			  border: 3px #fff solid;
			  color: #fff;
			  display: block;
			  font-size: 18px;
			  font-weight: normal;
			  margin: 0 auto;
			  max-width: 280px;
			  padding: 15px 0;
			  text-align: center;
			  text-transform: uppercase;
			  text-decoration: none;
			  width: 70%;
			    border-radius: 50px;
			    background:#ff4d54;
			}
		</style>
  </head>
  <body>
    <div class="container">
      <div class="image">
        <img src="images/个人界面.jpg">
      </div>
<div class="content">
        <div class="info">
          <h2>
郭一博</h2>
<span>个人界面</span>
        </div>
</div>
<ul>
<li><a href="index.html"><span class="fab fa-facebook-f">1</span></a></li>
<li><a href="login.html">2<span class="fab fa-twitter"></span></a></li>
<li><a href="zhengzhou.html">3<span class="fab fa-instagram"></span></a></li>
<li><a href="food.html">4<span class="fab fa-github"></span></a></li>
<ul>
                       <li><a href="#ms1">龙须糕</a></li>
                       <li><a href="#ms2">黄河鲤鱼</a></li>
                       <li><a href="#ms3">少林寺素饼</a></li> 
            </ul>         
<li><a href="feedback.html">5<span class="fab fa-youtube"></span></a></li>
</ul>
</div>
<div class="header"><div class="title">郭一博的主页(点击左方图片下方数字回到主页)</div>
</div>
   <div class="zzjj">
     <div class="biaoti">
       <h4>作者简介</h4>
           <span>您现在的位置：作者简介</span>
     </div> 
      <div class="dl">   
        <span>作者姓名：郭一博<br><br>性别：男<br><br>民族:汉族<br><br>出生年月:2001-8-18<br><br>生源地:河南省郑州市<br><br>学校:黄淮学院<br><br>学院:国际教育学院<br><br>专业班级:软件工程1903B<br><br>电话:123456789<br>
        </span>
       
      </div> 
  </div>

           
 </div>

<br>
<div id="footer">
 <div class="by">作业需要<br>
 Thanks For Your Welcome</div>
 
</div>
<div class="dy">
<div class="heart-btn">
      <div class="content">
        <span class="heart"></span>
        <span class="text">Like</span>
        <span class="numb"></span>
      </div>
    </div>
	</div>
	<!-- <script>
	      $(document).ready(function(){
	        $('.content').click(function(){
	          $('.content').toggleClass("heart-active")
	          $('.text').toggleClass("heart-active")
	          $('.numb').toggleClass("heart-active")
	          $('.heart').toggleClass("heart-active")
	        });
	      });
	    </script> -->
		
			
</body>
</html>